Complete redis.io dark theme implementation #2073
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Update docs home page to match redis.io color scheme (#091a23 background) - Change all text to white for proper contrast on dark background - Update navigation borders from dark to white with opacity - Change button colors to match redis.io 'Get a demo' button (#163341) - Add light blue accent line under banner for visual separation Header Navigation Updates: - Change header background to redis.io dark blue theme - Update all dropdown menus (Products, Resources) to dark blue with white text - Replace magnifying glass with oval 'Search' button matching redis.io style - Update 'Try Redis' button to red outline style with white text and hover fill - Change 'Knowledge Base' to 'FAQs' in Resources menu - Add proper right margin to 'Try Redis' button Footer Updates: - Change footer background to dark blue theme - Update all text to white/light gray for proper contrast - Update all section headings and links to white hover states - Maintain social media icons with white hover effects This creates a cohesive dark theme that perfectly matches the main redis.io site aesthetic while preserving all existing functionality and navigation structure.
andy-stark-redis
approved these changes
Sep 3, 2025
There was a problem hiding this comment.
Looking really good, so I'll approve :-) I noticed a couple of minor things that might not be a problem:
- Currently, the Redis for AI button has a black outline that goes red when you hover over it. You can't see the black outline on the dark theme, so maybe this needs a white outline (that still goes red on hover) to emphasise the AI button, as we currently do.
- The search icon looks fine, but the search box that appears when you click it is still black text on white background. Maybe this helps to distinguish it from the page background, though?
Button Border Improvements: - Add white border with opacity to 'Redis for AI' button for visibility on dark background - Add matching white border to search button in header navigation - Add consistent white borders to all rectangular buttons in home page content - Enhance hover effects with increased border opacity Search Modal Dark Theme: - Update modal background to redis-ink-900 with white border - Style search input with dark background and white text - Update filter dropdown with dark theme colors - Restyle cancel button to match site button design - Add comprehensive CSS for search results styling - Update search icon and dropdown arrow colors for visibility - Style search result items with proper hover and selection states - Add yellow highlighting for search term matches with proper contrast These updates ensure all interactive elements have proper visibility and consistent styling with the redis.io dark theme while maintaining excellent accessibility and user experience.
- Remove unwanted white border around footer while keeping top border line - Make banner accent line thinner (1px instead of 4px) for more subtle appearance - Improve overall visual hierarchy and clean up border inconsistencies These refinements create a more polished and professional look while maintaining the visual separation elements that enhance the design structure.
- Add default dark background (#374151) to all search result items - Update hover/selected state to slightly lighter background (#4b5563) - Ensure consistent dark theme styling across all search results - Fix issue where only first result had proper dark background This ensures all search results have proper visibility and consistent styling with the dark theme.
- Add overflow: hidden to prevent corner background artifacts - Improve border-radius consistency between container and anchor elements - Add inline styles to dynamically generated search results for reliable styling - Enhance CSS with !important declarations to override any conflicting styles - Increase spacing between search result items for better visual separation - Use border-radius: inherit to ensure perfect corner alignment This ensures all search results have clean, properly rounded corners with consistent dark backgrounds throughout the entire item area.
- Update search-item styles in assets/css/index.css to use dark theme colors - Change search item backgrounds from white to gray-700 for dark theme - Update text colors from dark to light gray for proper contrast - Change hover and selected states to use gray-600 with white text - Remove redundant CSS and inline styles from search modal - Clean up JavaScript to use standard HTML without inline styling This fixes the issue where only the first search result had proper dark styling by addressing the root CSS rules instead of trying to override them.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://redis.io/docs/staging/home-page-reskin/
Header Navigation Updates:
Footer Updates:
This creates a cohesive dark theme that perfectly matches the main redis.io site aesthetic while preserving all existing functionality and navigation structure.